{% if portal_ui %}
<section class="portal-form-hero portal-form-tone-{{ portal_ui.tone }}">
    <div class="portal-form-heading">
        <a class="portal-form-back" href="{{ portal_ui.list_url }}" title="Voltar a {{ portal_ui.list_label }}">
            <span class="material-symbols-outlined">arrow_back</span>
        </a>
        <span class="portal-form-icon material-symbols-outlined">{{ portal_ui.icon }}</span>
        <div class="portal-form-copy">
            <span class="portal-admin-kicker">{{ portal_ui.kicker }}</span>
            <div class="portal-form-title-line">
                <h1>{{ portal_ui.title }}</h1>
                {% if portal_ui.status %}<span class="portal-form-status portal-form-status-{{ portal_ui.status.tone }}">{{ portal_ui.status.label }}</span>{% endif %}
            </div>
            <p>{{ portal_ui.description }}</p>
        </div>
        <div class="portal-form-links">
            {% for link in portal_ui.links %}
                <a href="{{ link.url }}"><span class="material-symbols-outlined">{{ link.icon|default:'arrow_forward' }}</span>{{ link.label }}</a>
            {% endfor %}
        </div>
    </div>
    {% if portal_ui.meta %}
        <div class="portal-form-meta">
            {% for item in portal_ui.meta %}
                <div><span class="material-symbols-outlined">{{ item.icon }}</span><small>{{ item.label }}</small><strong>{{ item.value }}</strong></div>
            {% endfor %}
        </div>
    {% endif %}
</section>
{% endif %}